<%@ page language="java" contentType="text/html; charset=UTF-8"	 pageEncoding="UTF-8"%>
<%@ include file="../include/laypublic.jsp"%>
<!DOCTYPE html>
<html>
<head>
</head>
  <title>公告管理</title>
  <style type="text/css">
  	.layui-form-select dl{
		max-height: 150px; // 原值为300，调节高度建议为50的倍数
	}
  </style>
</head>
<body>
  <div class="layui-fluid">   
    <div class="layui-card">
      <!-- 查询区域  -->
      <div id="query-form" class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
              <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
             <label class="layui-form-label">创建时间</label>
             <div class="layui-input-inline">
               <input type="text" class="layui-input" id="sent-laydate-start" name="startDate" readonly placeholder="开始日期">
             </div>
             <div class="layui-form-mid">
               -
             </div>
             <div class="layui-input-inline">
               <input type="text" class="layui-input" id="sent-laydate-end" name="endDate" readonly placeholder="结束日期">
             </div>
           </div>
          <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
              <infopub:select id="query-form-state" entireName="-状态" name="state" type="dic" groupNo="A00010020"></infopub:select>
            </div>
          </div>
          <shiro:hasPermission name="LIST_NOTICE">
	          <div class="layui-inline">
	            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-notice-search">
	              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询
	            </button>
	            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-reset">
	              <i class="layui-icon layui-icon-fonts-clear  layuiadmin-button-btn"></i>重置
	            </button>
	          </div>
          </shiro:hasPermission>
        </div>
      </div>
  	  <!-- 按钮区域  -->
      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <shiro:hasPermission name="ADD_NOTICE">
          	<button class="layui-btn layuiadmin-btn-admin " data-type="add">
          	 <i class="layui-icon layui-icon-add layuiadmin-button-btn"></i>新增
          	</button>
          </shiro:hasPermission>
        </div>
        <!-- 数据表单 -->
        <table id="LAY-notice-manage" lay-filter="LAY-notice-manage"></table>
        
        <div class="layui-form" lay-filter="add_form" id="add_form" style="padding: 20px 30px 0 0;display:none">
		    <div class="layui-form-item">
		      	<label class="layui-form-label">标题</label>
		      	<div class="layui-input-inline">
		        	<input type="text" style="width:350px;" name="title" maxlength="100" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
		      	</div>
		    </div>
		    <div class="layui-form-item">
		      	<label class="layui-form-label">类型</label>
		      	<div class="layui-input-inline">
		        	<input type="text" name="types" maxlength="30" lay-verify="required" placeholder="请输入类型" autocomplete="off" class="layui-input">
		      	</div>
		    </div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">是否置顶</label>
			    <div class="layui-input-inline">
				    <select name="isTop"  lay-verify="required">
				    	<option value="">请选择</option>
						<option value="1">是</option>
						<option value="0">否</option>
					</select>
			    </div>
		  	</div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">摘要</label>
			    <div class="layui-input-block">
					<textarea name="summary" class="layui-textarea" maxlength="100" lay-verify="required" style="width:420px;height:90px;"></textarea>
			    </div>
		  	</div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">内容</label>
			    <div class="layui-input-block">
			    	<textarea name="content" class="layui-textarea" id="LAY_content" style="display: none"></textarea>
			    </div>
		  	</div>
		    <div class="layui-form-item layui-hide">
		      <input type="button" lay-submit lay-filter="add_form_submit" id="add_form_submit" value="确认">
		    </div>
	  	</div>
	  	
	  	<!-- 编辑窗口 -->
        <div class="layui-form" lay-filter="edit_form" id="edit_form" style="padding: 20px 30px 0 0;display:none">
        	<input type="hidden" name="id"/>
		    <div class="layui-form-item">
		      	<label class="layui-form-label">标题</label>
		      	<div class="layui-input-inline">
		        	<input type="text" style="width:350px;" name="title" maxlength="100" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
		      	</div>
		    </div>
		    <div class="layui-form-item">
		      	<label class="layui-form-label">类型</label>
		      	<div class="layui-input-inline">
		        	<input type="text" name="types" maxlength="30" lay-verify="required" placeholder="请输入类型" autocomplete="off" class="layui-input">
		      	</div>
		    </div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">是否置顶</label>
			    <div class="layui-input-inline">
				    <select name="isTop"  lay-verify="required">
				    	<option value="">请选择</option>
						<option value="1">是</option>
						<option value="0">否</option>
					</select>
			    </div>
		  	</div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">摘要</label>
			    <div class="layui-input-block">
					<textarea name="summary" class="layui-textarea" maxlength="100" lay-verify="required" style="width:420px;height:90px;"></textarea>
			    </div>
		  	</div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">内容</label>
			    <div class="layui-input-block">
			    	<textarea name="content" class="layui-textarea" id="LAY_edit_content" style="display: none"></textarea>
			    </div>
		  	</div>
		    <div class="layui-form-item layui-hide">
		      <input type="button" lay-submit lay-filter="edit_form_submit" id="edit_form_submit" value="确认">
		    </div>
	  	</div>
	  	<!-- 详情窗口 -->
        <div class="layui-form" lay-filter="detail_form" id="detail_form" style="padding: 20px 30px 0 0;display:none">
		    <div class="layui-form-item">
		      	<label class="layui-form-label">标题</label>
		      	<div class="layui-input-inline">
		        	<input type="text" name="title" readonly="readonly" class="layui-input">
		      	</div>
		    </div>
		    <div class="layui-form-item">
		      	<label class="layui-form-label">类型</label>
		      	<div class="layui-input-inline">
		        	<input type="text" name="types" readonly="readonly" class="layui-input">
		      	</div>
		    </div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">是否置顶</label>
			    <div class="layui-input-inline">
				    <select name="isTop" disabled="disabled">
						<option value="1">是</option>
						<option value="0">否</option>
					</select>
			    </div>
		  	</div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">摘要</label>
			    <div class="layui-input-block">
					<textarea name="summary" class="layui-textarea" readonly="readonly" style="width:420px;height:90px;"></textarea>
			    </div>
		  	</div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">内容</label>
			    <div class="layui-input-block">
			    	<textarea name="content" class="layui-textarea" readonly="readonly" id="LAY_detail_content" style="display: none"></textarea>
			    </div>
		  	</div>
		    <div class="layui-form-item layui-hide">
		      <input type="button" lay-submit lay-filter="edit_form_submit" id="edit_form_submit" value="确认">
		    </div>
	  	</div>
	  	
      </div>
    </div>
  </div>

  <script>
  	layui.config({
    	base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
  	}).extend({
    	index: 'lib/index' //主入口模块
  	}).use(['index', 'table', 'set', 'laydate', 'layedit'], function(){
    	var $ = layui.$
    	,form = layui.form
    	,table = layui.table
    	,layedit = layui.layedit
    	,laydate = layui.laydate;
    	
    	 layedit.set({
             //暴露layupload参数设置接口 --详细查看layupload参数说明
             uploadImage: {
                 url: basePath + '/notice/uploadFile',
                 accept: 'image',
                 acceptMime: 'image/*',
                 exts: 'jpg|png|gif|bmp|jpeg',
                 size: '10240'
             }
    	 })
   	    //开始日期
   	    var insStart = laydate.render({
   	      elem: '#sent-laydate-start'
   	      ,done: function(value, date){
   	        //更新结束日期的最小日期
   	        insEnd.config.min = lay.extend({}, date, {
   	          month: date.month - 1
   	        });
   	        
   	        //自动弹出结束日期的选择器
   	       insEnd.config.elem[0].focus();
   	      }
   	    });
   	    
   	    //结束日期
   	    var insEnd = laydate.render({
   	      elem: '#sent-laydate-end'
   	      ,done: function(value, date){
   	        //更新开始日期的最大日期
   	        insStart.config.max = lay.extend({}, date, {
   	          month: date.month - 1
   	        });
   	      }
   	    });
   	    
 		// 正则校验
    	form.verify({
    		//验证汉字
    	    CHS: [
    	    	/^[\u0391-\uFFE5]+$/
    	    	,'只能输入汉字'
    	  	]
		});

    	// 表单
    	table.render({
      		elem: '#LAY-notice-manage'
      		,url: basePath + '/notice/queryDataByCondition' //请求数据接口
      		,cols: [[
        		{type: 'checkbox', fixed: 'left'}
        		,{field: 'title', title: '标题'}
        		,{field: 'summary', title: '摘要'}
        		,{field: 'addTime', title: '创建时间', width:190,templet: function(d){
            		  	return layui.util.toDateString(d.addTime,"yyyy-MM-dd HH:mm:ss");
	              	}
	             }
        		,{field: 'state', title: '状态',width:120, templet: function (d) {
	        			if(d.state==1){
	          				return "启用中";
	          			}else{return '<span class="layui-badge layui-bg-cyan">已停用</span>' ;}
		        	}
 		    	}
        		,{title: '操作', width: 250, align:'center', fixed: 'right', templet: function(d){
      	  				var optStr ="";
      	  				optStr += '<a class="layui-btn layui-btn-xs" lay-event="view"><i class="layui-icon layui-icon-form"></i>详情</a>';
      	  				<shiro:hasPermission name="ADD_NOTICE">
      	 					optStr += '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>';
  	  	  				</shiro:hasPermission>
  	  	  				<shiro:hasPermission name="UPDATE_STATUS_NOTICE">
		  	  	  			if(d.state == 0){//停用
      	 						optStr += '<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="use"><i class="layui-icon layui-icon-ok"></i>启用</a>';
		   	        		}else if(d.state == 1){//启用
      	 						optStr += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="freeze"><i class="layui-icon layui-icon-pause"></i>停用</a>';
		   	        		}
						</shiro:hasPermission>
			  		  	return optStr;
        			}
        		}
      			]]
      		,page: true
      		,limit: 10
    	});
    
    	<shiro:hasPermission name="LIST_NOTICE">
	    	//监听搜索
	    	form.on('submit(LAY-notice-search)', function(data){
		      	//执行重载
		      	table.reload('LAY-notice-manage', {page: {curr: 1},
		        	where: trimData(data)
		      	});
	    	});
	    	//重置清空
		    form.on('submit(LAY-user-back-reset)', function(data){
		    	reset_form('query-form');
		    	//额外处理select
				$("#query-form-state").val('');
				form.render();
		    });
    	</shiro:hasPermission>
    
    	// 监听操作列
    	table.on('tool(LAY-notice-manage)', function(obj){
      		var data = obj.data;
      		if(obj.event === 'use'){
          		layer.confirm('确定启用？',{icon:3, title :'提示'}, function(index){
          			$.ajax({
  						type : 'post',
  						url : basePath + '/notice/updateStatus?id=' + data.id,
  						success:function(result){
  							if(result.success){
  								table.reload('LAY-notice-manage'); //数据刷新
  								layer.close(index);
  							}else{
  								layer.msg(result.msg,{icon: 7});
  				  			}
  						}
  					});
          		});
      		}else if(obj.event === 'freeze'){
          		layer.confirm('确定停用？',{icon:3, title :'提示'}, function(index){
          			$.ajax({
  						type : 'post',
  						url : basePath + '/notice/updateStatus?id=' + data.id,
  						success:function(result){
  							if(result.success){
  								table.reload('LAY-notice-manage'); //数据刷新
  								layer.close(index);
  							}else{
  								layer.msg(result.msg,{icon: 7});
  				  			}
  						}
  					});
          		});
      		} else if(obj.event === 'edit'){
      			form.val('edit_form',data); // 填充原值
      			layer.open({
            		type: 1
            		,title: '编辑公告'
            		,content: $('#edit_form')
            		,area: layui.admin.screen() < 2 ? ['80%', '550px'] : ['720px','550px']
            		,btn: ['确定', '取消']
            		,btnAlign: 'c'
            		,yes: function(index, layero){
          	  			var submitID = 'edit_form_submit'
          		  		,submit = layero.contents().find('#'+ submitID);
          	  			//监听提交
          	  			form.on('submit('+ submitID +')', function(data){
	          	  			var content = layedit.getContent(index);
	                   		if(content == ''){
	                   			layer.msg("内容未填",{icon: 0});
	                   			return;
	                   		}
	                      	var field = data.field; //获取提交的字段
	                      	field.content = content;
                			//提交 Ajax 成功后，静态更新表格中的数据
                			$.ajax({
                    			type : 'post',
  								url : basePath + '/notice/save',
                    			data: field,
  								success:function(result){
  									if(result.success){
                						table.reload('LAY-notice-manage'); //数据刷新
                						layer.close(index); //关闭弹层
  									}else{
  										layer.msg(result.msg,{icon: 7});
  					  				}
  								}
                			});
              			});
              		submit.trigger('click');
           		},success: function(layero, index){
    	        	//构建一个默认的编辑器
    	       	  	var index = layedit.build('LAY_edit_content', {
    	       	     height: 300
    	       	  	});
            	}
          	});
       	} else if(obj.event === 'view'){
  			form.val('detail_form',data); // 填充原值
  			layer.open({
        		type: 1
        		,title: '公告详情'
        		,content: $('#detail_form')
        		,area: layui.admin.screen() < 2 ? ['80%', '550px'] : ['720px','550px']
        		,success: function(layero, index){
		        	//构建一个默认的编辑器
		       	  	var index = layedit.build('LAY_detail_content', {
		       	  	tool: []
		       	     ,height: 300
		       	  	});
        		}
      		});
   		}
    	});
    
    // 按钮事件
    var active = {
      add: function(){
    	  clean_form("add_form");//清空表单
        layer.open({
          type: 1
          ,title: '添加公告'
          ,content: $('#add_form')
          ,area: layui.admin.screen() < 2 ? ['80%', '550px'] : ['720px','550px']
          ,btn: ['确定', '取消']
          ,btnAlign: 'c'
          ,yes: function(index, layero){
        	  var submitID = 'add_form_submit'
            	,submit = layero.contents().find('#'+ submitID);

              //监听提交
           	  form.on('submit('+ submitID +')', function(data){
           		var content = layedit.getContent(index);
           		if(content == ''){
           			layer.msg("内容未填",{icon: 0});
           			return;
           		}
              	var field = data.field; //获取提交的字段
              	field.content = content;
              	//提交 Ajax 成功后，静态更新表格中的数据
              	$.ajax({
                  	type : 'post',
					url : basePath + '/notice/save',
                  	data: field,
					success:function(result){
						if(result.success){
              				table.reload('LAY-notice-manage'); //数据刷新
              				clean_form("add_form");//清空表单
              				layer.close(index); //关闭弹层
						}else{
							layer.msg(result.msg,{icon: 7});
					  	}
					}
              	});
            });  
            submit.trigger('click');
          }
          ,success: function(layero, index){
	        	//构建一个默认的编辑器
	       	  	var index = layedit.build('LAY_content', {
	       	     height: 300
	       	  	});
        	}
        }); 
      }
    }  
    // data-type事件
    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    
  });
  	
  </script>
</body>
</html>

